<template>
  <div class="send">
    <van-nav-bar fixed title="Produtos Publicados" left-arrow :border="false" @click-left="handleBack" />
    <form action="/">
      <van-search v-model="params.remark" placeholder="Pesquisa de palavras-chave" background="#fff" @search="onSearch" />
    </form>
    <div class="mt10">
      <div class="type-select" @click="handleCateSelect">{{ typeName }}</div>
    </div>
    <div class="goods-list mt20">
      <div class="goods-item" v-for="item in list" :key="item.id">
        <div class="flex">
          <div class="flex-none mr10" @click="handleDetail(item)">
            <van-image :src="item.showImg" width="80" height="80" radius="4" fit="cover"/>
          </div>
          <div class="flex-auto width0 flex flex-column flex-justify-content-between">
            <div class="goods-name" @click="handleDetail(item)">{{ item.name }}</div>
            <div v-if="item.tag === '1' || item.tag === '3'"><span class="goods-tag">optimização</span></div>
            <div class="goods-price">{{ item.price | num2Money }} KZ</div>
          </div>
        </div>
        <div class="van-hairline--top flex flex-justify-content-end mt5 pt10">
          <van-button plain round  type="default" class="mr10" @click="handleDelete(item)" >Delete</van-button>
          <van-button plain round  type="primary" color="#fb8c24" class="mr10"  @click="handleEdit(item)" >Edit</van-button>
          <van-button plain round  type="primary" color="#fb8c24"  @click="handleMeal(item)" >{{ $t('component.sendList.7') }}</van-button>
        </div>
      </div>
    </div>
    <ModalCate v-if="cateShow" :category-id="params.categoryId" :section-id="params.sectionId" @close="cateShow = false" @confirm="handleCateConfirm" />
  </div>
</template>
<script>
import Api from "@/api";
import { Domain } from "@/constants";
// import CuButton from "@/components/button";
import ModalCate from "@/components/modal-cate";
export default {
  name: "Send",
  components: {  ModalCate },
  data() {
    return {
      columns1: [],
      list: [],
      params: {
        pageSize: 10,
        pageNo: 1,
        remark: "",
        sectionId: "",
        categoryId: "",
      },
      categoryName: "",
      sectionName: "",
      cateShow: false,
    };
  },
  computed: {
    typeName() {
      const { sectionName = "", categoryName = "" } = this;
      return categoryName ? categoryName : sectionName ? sectionName : "Select Category";
    },
  },
  created() {
    this.loadSendList();
  },
  methods: {
    handleBack() {
      this.$router.back();
    },
    onSearch() {
      this.loadSendList();
    },
    handleSelect() {
      this.params.pageNo = 1;
      this.loadSendList();
    },
    handleCateSelect() {
      this.cateShow = true;
    },
    handleCateConfirm(item) {
      this.cateShow = false;
      this.params = Object.assign({}, this.params, { ...item.query, pageNo: 1 });
      this.categoryName = item.categoryName;
      this.sectionName = item.sectionName;
      this.loadSendList();
    },
    loadSendList() {
      Api.getSendList(this.params).then((res) => {
        const { rows = [], total } = res;
        this.total = total;
        this.list = rows.map((item) => {
          const img = item.imgList ? JSON.parse(item.imgList)[0] : "";
          return Object.assign(item, { showImg: Domain + img });
        });
      });
    },
    handleDelete(item) {
      //todo 弹出确认框，执行删除
      this.$dialog
        .confirm({
          title: "Remover",
          message: "Remover Definitivamente?",
          confirmButtonText: "Sim",
          cancelButtonText: "Não",
          type: "warning",
        })
        .then(() => {
          Api.delGoods(item.id).then((res) => {
            this.$toast({
              type: "success",
              message: "Remover!",
            });
            this.loadSendList();
          });
        })
        .catch(() => {});
    },
    handleDetail(item) {
      this.$router.push({
        path: "/detail",
        query: {
          id: item.id,
        },
      });
    },
    handleEdit(item) {
      this.$router.push({
        path: "/edit",
        query: {
          id: item.id,
        },
      });
    },
     handleMeal(item) {
      this.$router.push({
        path: '/meal',
        query: {
          id: item.id,
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.send {
  padding: 62px 16px 16px;
  box-sizing: border-box;
  /deep/ .van-search {
    padding: 0;
    .van-search__content {
      background: #fff;
    }
  }
  .title {
    margin: 10px 0;
    color: #333;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.5;
    span {
      color: #fb8c24;
    }
  }
  .type-select {
    width: 100%;
    height: 34px;
    line-height: 34px;
    background: #fff;
    padding: 0 12px;
    box-sizing: border-box;
    color: #999;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .goods-list {
    .goods-item {
      margin-bottom: 10px;
      border-radius: 4px;
      padding: 10px;
      background: #fff;
      box-sizing: border-box;
      .goods-name {
        color: #595959;
        font-size: 14px;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .goods-tag {
        color: #fff;
        font-size: 12px;
        background: linear-gradient(235deg, #ff7144 0%, #f63e2d 100%);
        display: inline-block;
        padding: 5px 10px;
        border-radius: 4px;
      }
      .goods-price {
        color: #fb8c24;
        font-weight: bold;
        font-size: 14px;
      }
    }
  }
}
::v-deep.van-button{
  width: 74px;
  height: 30px;
}
</style>
